<template>
  <div>
    <router-link to="/search">
      <div class="search ">
        <div class="search_box flex">
            <div class="search_text"><div class= 'iconfont icon-search' style="float:left"></div>&nbsp;搜索商品, 共150166款好物</div>
        </div>
      </div>
    </router-link>
    <div class="nav flex">
      <scroll-view scroll-y class="left" enhanced='true' show-scrollbar='true'>
        <!-- 要遍历的内容 -->
        <div class="nav_list" v-for="(todo,index) in categroy1ID" :key="todo.id">
          <div class="nav_item" :class="{'active':index == changeActive}"  @click="changeNavge(index,todo)">{{ todo.name }}</div>
        </div>
      </scroll-view>
      <!-- 右侧 -->
      <!-- <sortList :categroy2ID="categroy2ID" :categoryGroupListL="categoryGroupListL"></sortList> -->
      <div>
        <div class="right" v-for="(todo,index) in categoryGroupListL" :key="todo.id">
            <div class="right_img" >
              <img class="right_img" :src="todo.picUrl" mode="scaleToFill" />
            </div>
            <div class="title">{{todo.name}}</div>
           
        </div>    
    </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {onMounted,ref} from 'vue'
import sort from '@/api/sort'


const categroy1ID = ref()
const categroy2ID = ref()
const changeActive = ref(0)
const categoryGroupListL = ref([])
const timer = new Date().getTime()


onMounted(async()=>{
  getCargroy1ID()
 
})
//获取一级分类
const getCargroy1ID =async ()=>{
   try {
    let result =await sort.getCargroy()
    categroy1ID.value = result.categoryL1List
    categroy2ID.value = result.categoryL2List
    categoryGroupListL.value =result.currentCategory.bannerList
    
   } catch (error) {
    
   }
}
const changeNavge=(index,todo)=>{
   changeActive.value =index
   console.log("xxxx",todo.id);
   getCargroy2ID(todo.id,timer)
}
const getCargroy2ID =async(id:any,timer)=>{
   try {
      console.log("时间",timer);
      
      let result = await sort.getCargroy2(id,timer)
      console.log(":",result);
      categroy2ID.value = result.categoryL2List
      categoryGroupListL.value =result.currentCategory.bannerList
   } catch (error) {
    
   }
}


</script>

<style scoped lang="scss">
.flex {
  display: flex;
}


.topImg {
  width: 100%;
  height: 52px;
}

.search {
  width: 100%;
  height: 88rpx;
  padding: 10px;
  border-bottom: 1px solid #ededed;
}

.search_box {
  background: #ededed;
  font-size: 14px;
  height: 28px;
  width: 345px;
  border-radius: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search_text {
  font-size: 14px;
  color: #666;
  margin: 1px auto;
  text-align: center;
  line-height: 28px;
  float: left;
 
}

.search_icon {
  display: block;
}


.left {
  border-right: 1px solid #ededed;
}

.nav {
  height: 100%;
  float: left;
}

.nav_list {
  width: 81px;
}

.nav_item {
  font-size: 14px;
  padding: 10px 10px;
  position: relative;
  line-height: 28px;
}

.nav_item.active::before {
  content: '';
  position: absolute;
  height: 50%;
  top: 25%;
  left: 0;
  bottom: 0;
  border-left: 3px solid #ab2b2b;
  color: #ab2b2b;
}

.right {
  padding: 15px;
  width: 100%;
}

.right_img {
  height: 96px;

  margin-bottom: 10px;
}

.title {
  font-size: 14px;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
  margin-bottom: 12px;
}


.container {
  flex-wrap: wrap;
  justify-content: space-between;
}

.minimg {
  width: 72px;
  height: 72px;
}

.minbox .text {
  font-size: 12px;
  align-items: center;
  padding-bottom: 30px;
  text-align: center;
}
</style>
